<template>
 <div class="card">
     <h2>热门精选</h2>
   <ul>
       <li v-for="item in props" :key="item.id" @click="gGoods(item.id)">
          <img :src="$imgUrl+item.img" alt="">
          <p>{{item.catename}}</p>
       </li>
      
    
   </ul>
 </div>
</template>

<script>
export default {
  props:["props"],
  methods:{
      gGoods(id){
          this.$emit("goodInfo",id);
      }
  }
}
</script>

<style scoped>
 .card{
     width: 4.24rem;
     height: 3.96rem;
     padding: 0.2rem;
     background-color: #fff;
      overflow: hidden;
      margin-top: 0.3rem;
     /* background-color: teal;; */
 }
 .card h2{
     font-size: 0.32rem;
     color:#333;
 }
 .card ul{
     display: flex;
     flex-wrap: wrap;
     width: 4.84rem;
     /* justify-content: space-between; */
     overflow: hidden;
     margin-top:0.2rem;
    
 }
 .card li{
    width: 1.28rem;
    height: 1.62rem;
    text-align: center;
    margin-bottom: 0.2rem;
    margin-right: 0.2rem;
    /* overflow: hidden; */
    /* background-color: pink; */
 }
 .card li img{
     display: block;
     width: 1.28rem; 
     height: 1.28rem;
 }
 .card li p{
     display: block;
     /* width: 0.96em; */
     /* height: 0.24rem; */
     font-size: 0.24rem;
     color:#999;
     /* margin-top: 0.1rem; */
 }
</style>